<extend  name="Layout::layout"/>

<block name="content">

    <div class="about_banner" style="background:url(__PUBLIC__/{$about['plug_ad_pic']}) no-repeat center"> </div>
    <div class="about_box">
        <div class="about_box">
            <div class="about_box1">
                <div class="left">
                    <div class="left1">
                        <div class="left2">走进七果</div>
                        <div class="left3">Company profile</div>
                    </div>
                    <div class="left4 js-top">
                        <ul>
                            <foreach name="columns1" item="value">
                                <li><a href="javascript:;"  data-id="{$value['c_id']}">
                                    <p>{$value['column_name']}</p></a></li>
                            </foreach>
                        </ul>
                    </div>

                    <div class="left_product">
                        <div class="left2">产品分类</div>
                        <div class="left3">Company profile</div>
                    </div>
                    <div class="left4 js-down">
                        <ul>
                            <foreach name="columns2" item="value">
                                <li><a href="javascript:;"  data-id="{$value['c_id']}">
                                    <p>{$value['column_name']}</p></a></li>
                            </foreach>
                        </ul>
                    </div>

                </div>
                <div class="right">
                    <div class="right1">
                        <div class="right2">{$columns1[2]['column_name']}</div>
                        <div class="right3">Company profile</div>
                        <div class="right4"><img src="__PUBLIC__/home/img/about_tb.gif" width="14" height="14"/> 您的当前位置：产品分类>>{$columns1[2]['column_name']}</div>
                    </div>
                    <div class="right5">
                        {$columns1[2]['column_content']}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        jQuery(".inBox").slide({
            titCell: ".inHd ul",
            mainCell: ".inBd",
            autoPage: true,
            effect: "leftLoop", // 是否循环，否则为 "left"
            autoPlay: true,     // 是否自动播放，否则为 false
            vis: 4              // 横向显示几列

        });
    </script>

    <script type="text/javascript">
        jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, trigger: "click"});
    </script>
    <script>
        $(document).ready(function () {
            //导航栏
            $('.top1 ul>li:nth-child(2)').addClass("present");
            //走进七果
            $('.left4 ul>li:first').addClass("present");
            $('.js-top ul>li').click(function () {
                $('.left ul>li').attr("class", "");
                $(this).attr("class", "present");
                var column_name = $(this).context.innerText;
                $.ajax({
                    type: 'POST',
                    url: "{:U('About/other')}",
                    data: {
                        name: column_name
                    },
                    dataType: 'html',
                    success: function (data) {
                        var data = JSON.parse(data);
                        $('.right1').next('div').replaceWith('<div class="right5"></div>');
                        $('.right2')[0].innerHTML = data.column_name;
                        $('.right4')[0].innerHTML = '<img src="__PUBLIC__/home/img/about_tb.gif" width="14" height="14"/>' + "您的当前位置：走进七果>>" + data.column_name;
                        $('.right5')[0].innerHTML = data.column_content;
                    }

                })


            })
            //产品分类
            $('.js-down ul>li').click(function () {
                $('.left ul>li').attr("class", "");
                $(this).attr("class", "present");
                var column_name = $(this).context.innerText;
                $.ajax({
                    type: 'POST',
                    url: "{:U('About/other2')}",
                    data: {
                        name: column_name
                    },
                    dataType: "html",
                    success: function (data) {
                        //alert(data);
                        var data = JSON.parse(data);
                        $('.right2')[0].innerHTML = column_name;
                        $('.right4')[0].innerHTML = '<img src="__PUBLIC__/home/img/about_tb.gif" width="14" height="14"/>' + "您的当前位置：产品分类>>" + column_name;
                        $('.right1').next('div').replaceWith('<div class="right_product"></div>');
                        //console.dir(data);
                        $('.right_product')[0].innerHTML = '<ul>';
                        for (b in data) {
                            $('.right_product')[0].innerHTML += '<li onclick="detail(' + data[b].n_id + ')" style="cursor:pointer"><a><img src="__PUBLIC__/' + data[b].news_img + '" width="265" height="169"></a><div class="right_product1"><a href="#">' + data[b].news_title + ' </a></div></li>';
                        }
                        $('.right_product')[0].innerHTML += '</ul>';

                    }
                })
            })


        });

        function detail(e) {

            var id = e;

            $.ajax({
                type: 'POST',
                url: "{:U('About/detail')}",
                data: {
                    id: id,
                },
                dataType: "html",
                success: function (data) {
                    //console.dir(data.news_typename);
                    var data = JSON.parse(data);
                    var str = '<div><div class="right_product2">' + data.news_typename + '</div><div class="right_product3"><img src="__PUBLIC__/' + data.news_img + '" width="265" height="169"></div><div class="right_product4">产品详情</div> <div class="right_product5">' + data.news_content + '</div></div>';
                    $('.right1').next('div').replaceWith(str);
                }
            })
        }

    </script>


</block>

